<template>
  <div class="xinmeiti-container">
    <Header />
    <div class="management-main">
      <div class="left-nav">
        <div class="department-title">部门导航</div>
        <button v-for="dept in departments" :key="dept.id" class="nav-item" :class="{ active: currentDepartment === dept.id }" @click="switchDepartment(dept.id)">
          {{ dept.name }}
        </button>
      </div>
      <div class="content-area">
        <div class="module-tabs">
          <button class="tab-btn" :class="{ active: currentModule === 'overview' }" @click="switchModule('overview')">部门概况</button>
          <button class="tab-btn" :class="{ active: currentModule === 'minister' }" @click="switchModule('minister')">现任部长</button>
          <button class="tab-btn" :class="{ active: currentModule === 'profile' }" @click="switchModule('profile')">个人中心</button>
        </div>
        <div class="module-content">
          <div v-if="currentModule === 'overview'" class="overview-module">
            <h3>{{ currentDeptName }}概况</h3>
            <p>{{ departmentOverviews[currentDepartment] }}</p>
            <div class="department-image">
              <img :src="departmentImageUrl" :alt="currentDeptName + '团队'" />
            </div>
          </div>

          <div v-if="currentModule === 'minister'" class="minister-module">
            <h3>{{ currentDeptName }}现任部长</h3>
            <div class="minister-card">
              <img :src="ministerAvatarUrl" alt="部长头像" class="minister-avatar" />
              <div class="minister-info">
                <h4>{{ ministerInfo[currentDepartment].name }}</h4>
                <p><span class="label">年级专业:</span> {{ ministerInfo[currentDepartment].major }}</p>
                <p><span class="label">职责:</span> {{ ministerInfo[currentDepartment].responsibility }}</p>
                <p><span class="label">联系方式:</span> {{ ministerInfo[currentDepartment].contact }}</p>
              </div>
            </div>
          </div>

          <div v-if="currentModule === 'profile'" class="profile-module">
            <h3>个人中心</h3>
            <form class="profile-form">
              <div class="form-group">
                <label>姓名</label>
                <input type="text" v-model="userProfile.name" />
              </div>
              <div class="form-group">
                <label>学号</label>
                <input type="text" v-model="userProfile.studentId" disabled />
              </div>
              <div class="form-group">
                <label>专业班级</label>
                <input type="text" v-model="userProfile.className" />
              </div>
              <div class="form-group">
                <label>联系电话</label>
                <input type="tel" v-model="userProfile.phone" />
              </div>
              <button type="button" class="save-btn" @click="saveProfile">保存信息</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, reactive } from 'vue'

// 处理图片路径（移至脚本部分）
const departmentImageUrl = new URL(`../../assets/主持.jpg`, import.meta.url).href
const ministerAvatarUrl = new URL(`../../assets/主持人.jpg`, import.meta.url).href

// 部门数据
const departments = [
  { id: 'operation', name: '运营部' },
  { id: 'interview', name: '采访部' },
  { id: 'photography', name: '摄影部' },
  { id: 'online', name: '网宣部' }
]

// 状态管理
const currentDepartment = ref('operation')
const currentModule = ref('overview')
const userProfile = reactive({
  name: '',
  studentId: '',
  className: '',
  phone: ''
})

// 部门概况
const departmentOverviews = {
  operation: '运营部负责广播台日常运营管理，包括活动策划、人员调度和对外合作等工作，是广播台的核心协调部门。',
  interview: '采访部负责校内各类新闻事件、人物专访的策划与执行，致力于捕捉校园生活中的精彩瞬间和动人故事。',
  photography: '摄影部负责各类活动的影像记录与后期制作，用镜头语言展现广播台的活力与校园文化的魅力。',
  online: '网宣部负责广播台线上平台的内容策划与推广，包括微信公众号、微博、抖音等新媒体矩阵的运营管理。'
}

// 部长信息
const ministerInfo = {
  operation: {
    name: '张三',
    major: '2021级市场营销',
    responsibility: '负责部门整体运营规划与团队管理',
    contact: '13800138000'
  },
  interview: {
    name: '李四',
    major: '2021级新闻学',
    responsibility: '负责采访选题策划与记者团队培训',
    contact: '13900139000'
  },
  photography: {
    name: '王五',
    major: '2021级数字媒体艺术',
    responsibility: '负责摄影技术指导与影像质量把控',
    contact: '13700137000'
  },
  online: {
    name: '赵六',
    major: '2021级网络与新媒体',
    responsibility: '负责新媒体平台内容策划与推广策略',
    contact: '13600136000'
  }
}

// 计算属性
const currentDeptName = ref('运营部')

departments.forEach(dept => {
  if (dept.id === currentDepartment.value) {
    currentDeptName.value = dept.name
  }
})

// 方法
const switchDepartment = (deptId) => {
  currentDepartment.value = deptId
  const selectedDept = departments.find(dept => dept.id === deptId)
  currentDeptName.value = selectedDept.name
}

const switchModule = (module) => {
  currentModule.value = module
}

const saveProfile = () => {
  // 保存个人信息逻辑
  alert('个人信息保存成功!')
}

// 初始化用户信息
const initUserProfile = () => {
  const savedProfile = localStorage.getItem('userProfile_' + currentDepartment.value)
  if (savedProfile) {
    const profile = JSON.parse(savedProfile)
    userProfile.name = profile.name
    userProfile.studentId = profile.studentId
    userProfile.class = profile.class
    userProfile.phone = profile.phone
  }
}

initUserProfile()
</script>

<style scoped>
/* 基础布局 */
.xinmeiti-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.management-main {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
  min-height: 600px;
}

/* 左侧导航 */
.left-nav {
  width: 200px;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.department-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  padding-left: 10px;
}

.nav-item {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 8px;
  border: none;
  border-radius: 6px;
  background-color: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.nav-item:hover {
  background-color: #e6f7ff;
  color: #1890ff;
}

.nav-item.active {
  background-color: #1890ff;
  color: white;
}

/* 内容区域 */
.content-area {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 模块标签 */
.module-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  color: #666;
  position: relative;
}

.tab-btn.active {
  color: #1890ff;
  font-weight: bold;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

/* 模块内容 */
.module-content {
  padding: 10px 0;
}

.module-content h3 {
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e8e8e8;
}

/* 部门概况 */
.overview-module p {
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.department-image {
  text-align: center;
  margin-top: 20px;
}

.department-image img {
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 部长信息 */
.minister-card {
  display: flex;
  gap: 20px;
  align-items: center;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.minister-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.minister-info h4 {
  margin-bottom: 10px;
  color: #333;
  font-size: 18px;
}

.minister-info .label {
  font-weight: bold;
  color: #333;
}

/* 个人中心 */
.profile-form {
  max-width: 500px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.save-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 10px;
}

.save-btn:hover {
  background-color: #096dd9;
}
</style>